<template>
  <div>
    <head-page></head-page>
    <div
      class="top"
      style="
        display: flex;
        flex-direction: row;
        margin: 20px 30px;
        justify-content: space-between;
        align-items: center;
      "
    >
      <div>
        <van-image
          class="user-avatar"
          src="https://img.yzcdn.cn/vant/cat.jpeg"
          round
          style="width: 1.3rem; height: 1.3rem; border: #969799 0.1rem solid"
        />
      </div>
      <div
        class="signup-info"
        style="
          display: flex;
          flex-direction: column;
          width: 60%;
          margin-left: 0.2rem;
        "
      >
        <div
          class="continuous-info"
          style="
            font-size: 0.5rem;
            margin-bottom: 0.01rem;
            display: flex;
            flex-direction: row;
          "
        >
          你已经连续签到
          <div class="signup-days" style="color: #a98204; margin: 0 0.15rem">
            2
          </div>
          天
        </div>
        <div class="continuous-hints" style="font-size: 0.35rem">
          明日签到可以获得10积分
        </div>
      </div>
      <div style="justify-content: center">
        <div
          class="now-jiFen"
          style="
            border-radius: 0.5rem;
            font-size: 0.45rem;
            height: 0.65rem;
            width: auto;
            padding: 0.1rem 0.4rem;
            border: #969799 0.05rem solid;
          "
        >
          556
        </div>
      </div>
    </div>

    <div
      class="signup-box"
      style="
        background-color: #5ea2fc;
        border-radius: 0.3rem;
        margin: 20px 30px;
        padding: 0.2rem;
      "
    >
      <div
        class="signup-hint2"
        style="margin-bottom: 0.1rem; font-size: 0.45rem; font-weight: bold"
      >
        连续签到领好礼
      </div>

      <div class="day1-day4" style="display: flex">
        <div class="day">
          第1天
          <van-icon name="success" style="color: #a98204" />
          10积分
        </div>
        <div class="day">
          第2天
          <van-icon name="success" style="color: #a98204" />
          10积分
        </div>
        <div class="day">
          第3天
          <van-icon name="success" style="color: #a98204" />
          10积分
        </div>
        <div class="day">
          第4天
          <van-icon name="success" style="color: #a98204" />
          10积分
        </div>
      </div>

      <div class="day5-day7" style="display: flex">
        <div class="day">
          第5天
          <van-icon name="success" style="color: #a98204" />
          10积分
        </div>
        <div class="day">
          第6天
          <van-icon name="success" style="color: #a98204" />
          10积分
        </div>
        <div class="day7">Day 7</div>
      </div>
    </div>

    <div
      style="
        margin: 20px 30px;
        background-color: #5ea2fc;
        border-radius: 0.5rem;
        padding-bottom: 0.5rem;
      "
    >
      <van-cell-group inset>
        <template #title>
          <div style="font-weight: bold; color: black; font-size: 0.45rem">
            做任务攒积分
          </div>
        </template>

        <van-cell title="XXXXXX" label="XXXXXX">
          <template #right-icon>
            <van-button round class="assignment-button fi-button"
              >+30</van-button
            >
          </template>
        </van-cell>

        <van-cell title="XXXXXX" label="XXXXXX">
          <template #right-icon>
            <van-button round class="assignment-button un-button"
              >去完成</van-button
            >
          </template>
        </van-cell>

        <van-cell title="XXXXXX" label="XXXXXX">
          <template #right-icon>
            <van-button round class="assignment-button un-button"
              >去完成</van-button
            >
          </template>
        </van-cell>

        <van-cell title="XXXXXX" label="XXXXXX">
          <template #right-icon>
            <van-button round class="assignment-button un-button"
              >去完成</van-button
            >
          </template>
        </van-cell>
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import headPage from "@/components/MyWallet/JiFenSignup/HeadPage.vue";

export default {
  components: {
    headPage,
  },
  name: "JiFenSignup",
};
</script>

<style scoped>
.day {
  font-size: 0.35rem;
  margin: 0.05rem;
  padding: 0.1rem 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: white;
  justify-content: center;
  align-items: center;
  border-radius: 0.15rem;
}

.day * {
  margin: 0.25rem 0;
}

.day7 {
  font-size: 0.5rem;
  padding: 0.02rem 0.1rem;
  margin: 0.05rem;
  flex: 2;
  display: flex;
  flex-direction: column;
  background-color: white;
  justify-content: center;
  align-items: center;
  border-radius: 0.3rem;
}

.assignment-button {
  font-size: 0.35rem;
  width: 2rem;
  height: 0.8rem;
  color: white;
  background-color: #5ea2fc;
  margin: 0.1rem 0.2rem;
}

.fi-button {
  background-color: green;
}
</style>